<template>
  <div v-loading="loading" class="writing">
    <div class="writing-header-wrapper">
      <flex class="tabs">
        <div
          :class="activeIndex === 1 ? 'select' : ''"
          class="temp-item"
          @click="handleSelect(1)"
        >
          模板导入
        </div>
        <div
          :class="activeIndex === 2 ? 'select' : ''"
          class="temp-item"
          @click="handleSelect(2)"
        >
          红头嵌套
        </div>
      </flex>
    </div>
    <flex v-show="activeIndex === 1" wrap="wrap" class="template-wrapper">
      <flex
        v-for="(item, index) in documentTemplateList"
        :key="index"
        justify="center"
        align="center"
        class="template-item"
      >
        <span>{{ item.label }}</span>
        <span
          v-if="hasPermission"
          class="click-text left"
          @click="handleChangeTemplate(item)"
          >修改模板</span
        >
        <input
          id="uploadFile"
          style="display: none"
          type="file"
          @change="uploadTemplate($event)"
        />
        <span class="click-text" @click="handleGetTemplate(item)">导入</span>
      </flex>
    </flex>
    <flex v-show="activeIndex === 2" wrap="wrap" class="template-wrapper">
      <flex
        v-for="(item, index) in documentTemplateListHongtou"
        :key="index"
        justify="center"
        align="center"
        class="template-item"
      >
        <span
          v-if="hasPermission"
          class="click-text left"
          @click="handleChangeTemplate(item)"
          >修改模板</span
        >
        <span>{{ item.label }}</span>
        <span class="click-text" @click="handleGetTemplate(item)">嵌套</span>
      </flex>
    </flex>
  </div>
</template>

<script>
import * as api from '@/api/writing'
import { documentTemplateList } from '../template.js'

export default {
  data() {
    return {
      loading: false,
      activeIndex: 1,
      documentTemplateList,
      templateItem: {},
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(wps.PluginStorage.getItem('LoginInfo'))
    },
    hasPermission() {
      // 判断是否有权限 修改模版
      return false
    },
    documentTemplateListHongtou() {
      return documentTemplateList.filter((v) => v.head) || []
    },
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index
    },
    // 修改模板
    handleChangeTemplate(item) {
      this.templateItem = item
      document.getElementById('uploadFile').click()
    },
    uploadTemplate() {
      let files = event.target.files || event.srcElement.files
      let template = files[0]
      if (!template.name.includes('doc')) {
        this.$message.error('请上传正确的文档!')
        document.getElementById('uploadFile').value = null
        return
      }
      let formData = new FormData()
      formData.append('file', template)
      this.loading = true
      api
        .templateUploadFile(formData)
        .then((res) => {
          const data = res.data
          this.updateTemplate(data)
        })
        .finally(() => {
          document.getElementById('uploadFile').value = null
        })
    },
    updateTemplate(data) {
      api
        .getTemplateByType({
          templateType: this.activeIndex,
          templateChildType: this.templateItem.value,
        })
        .then((res) => {
          const template = res.data
          api
            .updateWritingTemplateById({
              id: template.id,
              templateUrl: data.url,
              fileName: data.name,
            })
            .then(() => {
              this.$message.success('修改成功')
              this.loading = false
            })
        })
    },
    // 导入模板
    handleGetTemplate(item) {
      api
        .getTemplateByType({
          templateType: this.activeIndex,
          templateChildType: item.value,
        })
        .then((res) => {
          const data = res.data
          if (this.activeIndex === 1) {
            this.importContentByTemplate(data)
          } else {
            this.importHeadByTemplate(data)
          }
        })
    },
    importContentByTemplate(data) {
      let flag = window.confirm('素材即将以覆盖的形式导入文档，请注意保存！')
      if (flag) {
        // window.alert(JSON.stringify(data))
        if (data && data.templateUrl) {
          window.c_methods.insertWord(0, 999999, data.templateUrl)
        }
      } else {
        window.alert('cancel')
      }
    },
    importHeadByTemplate(data) {
      let flag = window.confirm('是否确认导入红头文件')
      if (flag) {
        if (data && data.templateUrl) {
          window.c_methods.insertWord(0, 0, data.templateUrl)
        }
      }
    },
    getPageNumber() {
      let adoc = wps.WpsApplication().ActiveDocument
      for (var i = adoc.Bookmarks.Count; i >= 1; i--) {
        // adoc.Bookmarks.Item(i).Range.Text += '123\n'
        let bookMark = adoc.Bookmarks.Item(i)
        if (bookMark.Name.includes('成文日期')) {
          console.log(bookMark)
        }
      }
    },
  },
}
</script>

<style scoped>
.temp-item {
  cursor: pointer;
  padding: 8px 20px;
  color: #606166;
  font-size: 16px;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid #efeff1;
  border-bottom-width: 0;
}
.temp-item:first-child {
  border-top-left-radius: 8px;
}
.temp-item:last-child {
  border-top-right-radius: 8px;
}
.temp-item:hover {
  color: #606166;
}
.temp-item.select {
  color: #fff;
  background-color: rgb(53, 125, 255);
}
.template-wrapper {
  /* gap: 20px; */
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #efeff1;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.template-item {
  position: relative;
  text-align: center;
  cursor: pointer;
  width: calc(50% - 20px);
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 16px;
  margin-right: 16px;
  box-sizing: border-box;
  font-size: 14px;
  background-color: #fafafa;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.template-item:hover {
  color: #357dff;
  border-color: rgb(53, 125, 255);
}
.click-text {
  position: absolute;
  display: none;
  top: 0px;
  right: 0px;
  font-size: 12px;
  padding: 12px 8px;
}
.click-text.left {
  position: absolute;
  left: 0px;
  right: 0px;
  color: #fff;
  background-color: #357dff;
}
.template-item:hover .click-text {
  display: inline;
  color: #fff;
  background-color: #357dff;
}
.click-text:hover {
  opacity: 0.8;
}
</style>
